<html>
<head>

<script>

var controlBar;
var confirmButton;
var cancelButton;
function startGUI(){
  createButtons();
  addListeners();
}


function createButtons() {
  /*var iframeBody = $('#control_bar').contents().find("body");
  iframeBody.css({
  	'position': 'absolute',
  	'border':'none',
	'overflow':'hidden',
  	'top': '24px',
  	'left': '0px',
  	'padding': '0px',
  	'display':'inline',
  	'width':'223px',
  	'height':'48px',
  	'margin':'0px',
  });*/

  containerDiv = document.createElement('div');
  containerDiv.id = 'container_div';
  document.documentElement.appendChild(containerDiv);
  containerDiv.class = "button";
  //var styleTag = iframeBody.append(containerDiv);

  confirmButton = document.createElement("input");
  confirmButton.id = "confirm_button";
  confirmButton.type = "button";
  confirmButton.value = "Confirm";

  containerDiv.appendChild(confirmButton);
  confirmButton.style.position = 'relative';
  confirmButton.style.boxShadow = '0px 0px 0px #000000';
  confirmButton.style.top = '50%';
  confirmButton.style.left = '10px';
  confirmButton.style.border = 'none';
  //confirmButton.style.-webkit-border-radius =  '5';
  //confirmButton.style.-moz-border-radius =  '5';
  confirmButton.style.borderRadius =  '5px';
  confirmButton.style.fontFamily = 'Arial';
  confirmButton.style.color = '#ffffff';
  confirmButton.style.fontSize =  '16px';
  confirmButton.style.background = '#32c746';
  confirmButton.style.padding = '7px 20px 7px 20px';
  confirmButton.style.textDecoration = 'none';


  cancelButton = document.createElement("input");
  cancelButton.id = "cancel_button";
  cancelButton.type = "button";
  cancelButton.value = "Cancel";

  containerDiv.appendChild(cancelButton);
  cancelButton.style.position = 'relative';
  cancelButton.style.boxShadow = '0px 0px 0px #000000';
  cancelButton.style.top = '50%';
  cancelButton.style.left = '20px';
  cancelButton.style.border = 'none';
  //cancelButton.style.-webkit-border-radius =  '5';
  //cancelButton.style.-moz-border-radius =  '5';
  cancelButton.style.borderRadius =  '5px';
  cancelButton.style.fontFamily = 'Arial';
  cancelButton.style.color = '#ffffff';
  cancelButton.style.fontSize =  '16px';
  cancelButton.style.background = '#ff3030';
  cancelButton.style.padding = '7px 20px 7px 20px';
  cancelButton.style.textDecoration = 'none';
}

function addListeners() {
  //since injected used delegated event listener
  confirmButton.onclick = function(){
    // Send response to parent!
    parent.postMessage('confirm', '*'); //need '*' so works for all domains.
  };
  cancelButton.onclick = function() {
    // send response
    parent.postMessage('cancel', '*');
  };
}
</script>
</head>
<body onload="startGUI()">
</body>
</html>